<template>
  <div class="register-container">
    <div class="register-form">
      <h2>注册</h2>
      <form @submit.prevent="register">
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" v-model="username" @blur="validateUsername" required />
          <transition name="fade">
            <p v-if="errors.username" class="error">{{ errors.username }}</p>
          </transition>
        </div>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" id="email" v-model="email" @blur="validateEmail" required />
          <transition name="fade">
            <p v-if="errors.email" class="error">{{ errors.email }}</p>
          </transition>
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input
            type="password"
            id="password"
            v-model="password"
            @blur="validatePassword"
            required
          />
          <transition name="fade">
            <p v-if="errors.password" class="error">{{ errors.password }}</p>
          </transition>
        </div>
        <div class="form-group">
          <label for="confirm-password">确认密码</label>
          <input
            type="password"
            id="confirm-password"
            v-model="confirmPassword"
            @blur="validateConfirmPassword"
            required
          />
          <transition name="fade">
            <p v-if="errors.confirmPassword" class="error">{{ errors.confirmPassword }}</p>
          </transition>
        </div>
        <button type="submit">注册</button>
      </form>
      <transition name="fade">
        <p v-if="error" class="error">{{ error }}</p>
      </transition>
      <transition name="fade">
        <p v-if="success" class="success">{{ success }}</p>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RegisterView',
  data() {
    return {
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
      error: '',
      success: '',
      errors: {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
      },
    }
  },
  methods: {
    register() {
      if (this.validateAll()) {
        this.error = ''
        this.success = '注册成功！'
      } else {
        this.success = ''
      }
    },
    validateUsername() {
      if (!this.username) {
        this.errors.username = '用户名不能为空'
      } else {
        this.errors.username = ''
      }
    },
    validateEmail() {
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if (!this.email) {
        this.errors.email = '邮箱不能为空'
      } else if (!emailPattern.test(this.email)) {
        this.errors.email = '邮箱格式不正确'
      } else {
        this.errors.email = ''
      }
    },
    validatePassword() {
      if (!this.password) {
        this.errors.password = '密码不能为空'
      } else if (this.password.length < 6) {
        this.errors.password = '密码至少需要6个字符'
      } else {
        this.errors.password = ''
      }
    },
    validateConfirmPassword() {
      if (!this.confirmPassword) {
        this.errors.confirmPassword = '确认密码不能为空'
      } else if (this.confirmPassword !== this.password) {
        this.errors.confirmPassword = '密码不一致'
      } else {
        this.errors.confirmPassword = ''
      }
    },
    validateAll() {
      this.validateUsername()
      this.validateEmail()
      this.validatePassword()
      this.validateConfirmPassword()
      return (
        !this.errors.username &&
        !this.errors.email &&
        !this.errors.password &&
        !this.errors.confirmPassword
      )
    },
  },
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
  transition: background-color 0.5s ease;
}

.register-form {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.register-form h2 {
  margin-bottom: 20px;
  text-align: center;
  transition: color 0.3s ease;
}

.form-group {
  margin-bottom: 15px;
  transition: opacity 0.3s ease;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  transition: color 0.3s ease;
}

.form-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.form-group input:focus {
  border-color: #007bff;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}

.error {
  color: red;
  text-align: left;
  margin-top: 5px;
  font-size: 12px;
}

.success {
  color: green;
  text-align: center;
  margin-top: 10px;
}

/* CSS 动画和过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.register-form:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.register-form h2:hover {
  color: #007bff;
}

.form-group:hover {
  opacity: 0.8;
}

.form-group label:hover {
  color: #007bff;
}
</style>
